<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web-Bench SVG-Chart</title>
    <link rel="stylesheet" href="index.scss" />
  </head>
  <body>
    <div class="root">
      <div id="configs">
        <label
          >Chart Type:<br />
          <select id="type">
            <option value="line">Line Chart</option>
            <option value="smoothLine">SmoothLine Chart</option>
            <option value="scatter">Scatter Chart</option>
            <option value="step">Step Chart</option>
            <option value="area">Area Chart</option>
            <option value="bar">Bar Chart</option>
            <option value="pie">Pie Chart</option>
            <option value="doughnut">Doughnut Chart</option>
          </select>
        </label>

        <label><input type="checkbox" id="axes" checked /> Axes</label>
        <label><input type="checkbox" id="grids" checked /> Grids</label>
        <label><input type="checkbox" id="legends" checked /> Legends</label>
        <label><input type="checkbox" id="dataLabels" /> DataLabels</label>

        <label
          >Select PointStyle<br />
          <select id="pointStyle">
            <option value=""></option>
            <option value="circle">circle</option>
            <option value="rect">rect</option>
          </select>
        </label>

        <label
          >Y Value(s):<br />
          <select id="datasets" multiple>
            <option value="Pass@2" selected>Pass@2</option>
            <option value="Pass@1" selected>Pass@1</option>
            <option value="Error@1" selected>Error@1</option>
          </select>
        </label>
      </div>
      <div id="chart"></div>
    </div>

    <script type="module" src="index.js"></script>
  </body>
</html>
